<script lang="tsx" setup>
import {nextTick, ref} from "vue";
import {defineDialogForm, definePageModel, PageModel, DialogForm, processRequest} from "@/framework";
import APIS from "@/apis";
import {ElMessage, ElMessageBox} from "element-plus";

/**
 * 菜单数据
 */
const menuId = ref()

/**
 * 角色id
 */
const roleId = ref()

/**
 * 弹窗实例
 */
const dialogFormModelRef = ref()
const form = defineDialogForm({
  width: "1000px",
  title: "角色按钮配置"
})

/**
 * 页面实例
 */
const pageModelRef = ref()
const config = definePageModel<any>({
  url: APIS.ROLE_BUTTON,
  getImmediate: false,
  otherParams: {
    roleId: null,
    menuId: null
  },
  searchForm: {
    els: [
      {
        eType: "el-input",
        prop: "keyword",
        props: {
          placeholder: "关键字",
          clearable: true
        }
      },
    ]
  },
  programForm: {
    els: [
      {
        label: "启用",
        eType: "el-button",
        props: {
          type: "primary"
        },
        event: "enabled"
      },
      {
        label: "禁用",
        eType: "el-button",
        props: {
          type: "danger"
        },
        event: "disabled"
      }
    ]
  },
  table: {
    page: {
      enable: true,
      pageSize: 20
    },
    selection: true,
    props: {
      stripe: true,
      border: true
    },
    els: [
      {
        label: "按钮key",
        prop: "key",
        minWidth: 120
      },
      {
        label: "按钮名称",
        prop: "key",
        minWidth: 120
      },
      {
        label: "按钮备注",
        prop: "remark",
        minWidth: 120
      },
      {
        label: "是否启用",
        prop: "isEnable",
        minWidth: 120,
        renderFn(data) {
          const type = data.isEnable ? "success" : "danger"
          return <el-tag type={type}>{data.isEnable ? "启用" : "禁用"}</el-tag>
        }
      }
    ]
  }
})

/**
 * 刷新
 */
const refreshTableData = (isClear: boolean = false) => {
  pageModelRef.value.refreshTableData()
  isClear && pageModelRef.value.clearSelection()
}

/**
 * 批量启用
 */
const handleEnabled = async () => {
  const selectData = pageModelRef.value.getTableSelectData()
  if (!selectData) {
    ElMessage.warning("请先选择一条数据")
    return false
  }
  await ElMessageBox.confirm("是否确认启用?", "启用", {
    type: "warning"
  })
  await processRequest.post(APIS.ROLE_BUTTON_ENABLE, {
    roleId: roleId.value,
    menuId: menuId.value,
    buttonId: selectData.map((item: any) => item.menuButtonId)
  })
  ElMessage.success("启用成功")
  refreshTableData()
}

/**
 * 批量禁用
 */
const handleDisabled = async () => {
  const selectData = pageModelRef.value.getTableSelectData()
  if (!selectData) {
    ElMessage.warning("请先选择一条数据")
    return false
  }
  await ElMessageBox.confirm("是否确认禁用?", "禁用", {
    type: "warning"
  })
  await processRequest.post(APIS.ROLE_BUTTON_DISABLE, {
    roleId: roleId.value,
    menuId: menuId.value,
    buttonId: selectData.map((item: any) => item.menuButtonId)
  })
  ElMessage.success("禁用成功")
  refreshTableData()
}

/**
 * 显示
 */
const show = (params: any) => {
  dialogFormModelRef.value.show()
  menuId.value = params.menuId
  roleId.value = params.roleId
  if (config.otherParams) {
    config.otherParams.roleId = params.roleId
    config.otherParams.menuId = params.menuId
  }
  nextTick(() => {
    refreshTableData(true)
  })
}

/**
 * 暴露
 */
defineExpose({
  show
})
</script>

<template>
  <DialogForm ref="dialogFormModelRef" :dialogFormModel="form">
    <div class="menu-form">
      <PageModel ref="pageModelRef" :PageModel="config" @disabled="handleDisabled" @enabled="handleEnabled"/>
    </div>
  </DialogForm>
</template>

<style lang="scss" scoped>
.menu-form {
  height: 600px;
  display: flex;
  flex-direction: column;
}
</style>